<template>
  <button
    @click="toggleTheme"
    class="tw-fixed tw-top-4 tw-right-4 tw-p-2 tw-rounded-full tw-bg-white dark:tw-bg-gray-800 tw-shadow-md hover:tw-bg-gray-100 dark:tw-hover:tw-bg-gray-700 tw-transition-colors"
    aria-label="Toggle theme"
  >
    <svg
      v-if="!isDark"
      xmlns="http://www.w3.org/2000/svg"
      class="tw-h-5 tw-w-5 tw-text-gray-800"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
      />
    </svg>
    <svg
      v-else
      xmlns="http://www.w3.org/2000/svg"
      class="tw-h-5 tw-w-5 tw-text-yellow-300"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
      />
    </svg>
  </button>
</template>

<script setup lang="ts">
// import { useTheme } from '@/composables/useTheme'
// const { isDarkMode, toggleTheme } = useTheme()
import { useThemeStore } from '@/stores/darkTheme'
import { storeToRefs } from 'pinia' // 将 Pinia 状态转为响应式

// 引入主题 store 并解构响应式状态
const themeStore = useThemeStore()
themeStore.initTheme() // 初始化主题

const { isDark } = storeToRefs(themeStore)

// 切换主题的方法
const toggleTheme = () => {
  themeStore.toggleDarkMode()
}
</script>
